<script setup lang="ts">
  import { ref, watch, defineEmits, onMounted } from 'vue';
  import { Notification } from '@arco-design/web-vue';
  import { getDesignatedArea } from '@/api/stocktaking';
  import { SelectdStringptionRoad } from '@/api/les/types';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';
  import AddForm from './components/add-form.vue';

  const emit = defineEmits(['updateTableData']);
  const tableData = ref<any>(null);
  const trayOptions = ref<SelectdStringptionRoad[]>([]);
  const largeLocationOptions = ref<any[]>([]);

  const stocktakingTypeOptions = [
    {
      label: '随机',
      value: 1,
    },
    {
      label: '季度',
      value: 2,
    },
    {
      label: '年终',
      value: 3,
    },
  ];

  const statusOptions = [
    {
      label: '待执行',
      value: 0,
    },
    {
      label: '执行中',
      value: 1,
    },
    {
      label: '已完成',
      value: 2,
    },
  ];

  // 查询托盘/库位
  async function getDesignatedAreas() {
    const data = await getDesignatedArea();
    if (data.retCode === '200') {
      // 非大件托盘
      trayOptions.value = data.responseBody.msSslShelvesList.map(
        (item: any) => ({
          label: item.palletCode,
          value: item.palletCode,
        })
      );
      // 大件库位
      largeLocationOptions.value = data.responseBody.location;
    } else {
      Notification.error({
        title: '巷道/库位查询失败',
        content: data.message,
        closable: true,
      });
    }
  }

  onMounted(() => {
    getDesignatedAreas();
  });

  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">盘点计划</div>
      </template>
      <div class="content">
        <TopInput
          @updateArray="tableData = $event"
          :stocktakingTypeOptions="stocktakingTypeOptions"
          :statusOptions="statusOptions"
        />
        <a-divider />
        <TopTable
          :table-data="tableData"
          :stocktakingTypeOptions="stocktakingTypeOptions"
          :statusOptions="statusOptions"
          :trayOptions="trayOptions"
          :largeLocationOptions="largeLocationOptions"
        />
      </div>
      <AddForm
        :stocktakingTypeOptions="stocktakingTypeOptions"
        :statusOptions="statusOptions"
        :trayOptions="trayOptions"
        :largeLocationOptions="largeLocationOptions"
      />
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
